<template>
    <div id="leftMenu" class="leftMenu">
        <Menu ref="menu" width="220"  theme="light" :active-name=activeName :open-names="[openNames]"
              @on-select="goPage" accordion>
            <!--一级-->
            <!--<Submenu v-for="menu in currentMenu" :key="menu.id" :name="menu.name">-->
            <Submenu v-for="(menu,index) in menu[openNames]" :key="index" :name="menu.name">
                <template slot="title">
                    <Icon v-if="menu.icon" :type="menu.icon"></Icon>
                    {{menu.title}}
                </template>
                <!--二级-->
                <div v-if="menu.nextItem">
                    <div v-for="(sec_menu) in menu.nextItem" :key="sec_menu.id">
                        <!--没有三级-->
                        <MenuItem v-if="!sec_menu.nextItem" :name="sec_menu.path">
                            {{ sec_menu.title }}
                        </MenuItem>
                        <!--三级-->
                        <Submenu v-else :name="sec_menu.name">
                            <template slot="title">
                                {{ sec_menu.title }}
                            </template>
                            <template>
                                <MenuItem v-for="thirdMenu in sec_menu.nextItem" :key="thirdMenu.id"
                                          :name="thirdMenu.path">
                                    {{ thirdMenu.title }}
                                </MenuItem>
                            </template>
                        </Submenu>

                    </div>
                </div>
            </Submenu>
        </Menu>
    </div>

</template>

<script>
  export default {
    data() {
      return {
        openNames: '',//根据头部选择展开哪个侧边栏
        activeName: "",//展开的侧边栏哪个是active
        currentMenu: [],
        menu: {
          //销售
          resManage: [
            {
              name: "resManage",
              id: '1',
              title: '资源分配管理',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '11',
                  path: '/resManage/newList',
                  title: '新名单分配'
                },
                {
                  id: '12',
                  path: '/resManage/m2',
                  title: '公海分配'
                },
                {
                  id: '13',
                  path: '/resManage/m3',
                  title: '藏经阁分配'
                },
                {
                  id: '14',
                  path: '/resManage/m4',
                  title: '付费学院管理'
                },
                {
                  id: '15',
                  path: '/resManage/m5',
                  title: '新增推荐 leads'
                }
              ]
            },
            {
              name: 'listFollowUp',
              id: '2',
              title: '名单跟进',
              icon: 'md-call',
              nextItem: [
                {
                  name: "21",
                  id: '21',
                  title: '工具条',
                  nextItem: [
                    {
                      id: '211',
                      path: '/listFollowUp/outbound',
                      title: '外呼'
                    },
                    {
                      id: '212',
                      path: '/listFollowUp/getNewLeads',
                      title: '获取新 leads'
                    },
                  ]
                },
                {
                  id: '22',
                  path: '/customer/conversation1',
                  title: '我的未签约名单'
                },
                {
                  name: "23",
                  id: '23',
                  path: '/customer/trial',
                  title: '跟进流程',
                  nextItem: [
                    {
                      id: '231',
                      path: '/231',
                      title: '1 待跟进'
                    },
                    {
                      id: '232',
                      path: '/232',
                      title: '2 待排课'
                    },
                    {
                      id: '233',
                      path: '/233',
                      title: '3 待上课'
                    },
                    {
                      id: '234',
                      path: '/234',
                      title: '4 待付费'
                    },
                    {
                      id: '235',
                      path: '/235',
                      title: '5 待移交'
                    },
                  ]
                },
                {
                  id: '24',
                  path: '/24',
                  title: '已签约学员'
                },
              ]
            },
            {
              name: 'mkt',
              id: '3',
              title: '学员跟进',
              icon: 'md-school',
              nextItem: [
                {
                  id: '31',
                  path: 'student/toBeArranged',
                  title: '我的学员'
                }, {
                  id: '32',
                  path: 'student/student',
                  title: '课程管理'
                }, {
                  id: '33',
                  path: 'student/refund',
                  title: '订单管理'
                }]
            }],
          //教学
          teaching: [
            {
              name: 'teaching',
              id: '1',
              title: '教学',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '11',
                  path: '/teaching/market',
                  title: '教学分配'
                },
                {
                  id: '12',
                  path: '/teaching/market2',
                  title: '公海分配'
                },
                {
                  id: '13',
                  path: '/teaching/marke3',
                  title: '藏经阁分配'
                },
                {
                  id: '14',
                  path: '/teaching/marke4',
                  title: '付费学院管理'
                },
                {
                  id: '15',
                  path: '/teaching/market5',
                  title: '新增推荐 leads'
                }
              ]
            }],
          //市场
          mkt: [
            {
              name: 'mkt',
              id: '1',
              title: '渠道投放管理 ',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '11',
                  path: '/mkt/channelManage',
                  title: '渠道管理'
                }]
            },
            {
              name: 'cusService',
              id: '2',
              title: '客服管理平台 ',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '21',
                  path: '/cusService/addLeads',
                  title: '新增 leads'
                },
                {
                  id: '22',
                  path: '/cusService/remarkLeads',
                  title: 'leads 信息备注'
                }
              ]
            },
            {
              name: 'product',
              id: '2',
              title: '产品课程管理 ',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '21',
                  path: '/product/productManage',
                  title: '产品管理'
                },
                {
                  id: '22',
                  path: '/product/classTypeManage',
                  title: "班型管理"
                },
                {
                  id: '23',
                  path: '/product/classCategory',
                  title: '班型类别管理'
                },
                {
                  id: '24',
                  path: '/product/gradeManage',
                  title: "年级管理"
                },
                {
                  id: '25',
                  path: '/product/subjectManage',
                  title: "科目管理"
                }
              ]
            },
            {
              name: 'activity',
              id: '3',
              title: '营销活动管理',
              icon: 'md-call',
              nextItem: [
                {
                  name: "31",
                  id: '31',
                  title: '优惠码管理',
                  nextItem: [
                    {
                      id: '311',
                      path: '/activity/activity1',
                      title: '优惠码1'
                    },
                    {
                      id: '312',
                      path: '/activity/activity2',
                      title: '优惠码1'
                    },
                  ]
                }
              ]
            }

          ],
          //财务
          finance:[
            {
              name: "finance",
              id: '1',
              title: '财务',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '11',
                  path: '/finance/market',
                  title: '财务1'
                },
                {
                  id: '12',
                  path: '/resManage/m2',
                  title: '公海分配'
                },
                {
                  id: '13',
                  path: '/resManage/m3',
                  title: '藏经阁分配'
                },
                {
                  id: '14',
                  path: '/resManage/m4',
                  title: '付费学院管理'
                },
                {
                  id: '15',
                  path: '/resManage/m5',
                  title: '新增推荐 leads'
                }
              ]
            },
          ],
          //技术
          technology:[
            {
              name: "technology",
              id: '1',
              title: '技术',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '11',
                  path: '/technology/market',
                  title: '技术1'
                },
                {
                  id: '12',
                  path: '/resManage/m2',
                  title: '技术2'
                },
              ]
            },
          ],
          //数据
          data:[
            {
              name: "data",
              id: '1',
              title: '数据',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '11',
                  path: '/data/market',
                  title: '数据1'
                },
                {
                  id: '12',
                  path: '/resManage/m2',
                  title: '公海分配'
                },
                {
                  id: '13',
                  path: '/resManage/m3',
                  title: '藏经阁分配'
                },
                {
                  id: '14',
                  path: '/resManage/m4',
                  title: '付费学院管理'
                },
                {
                  id: '15',
                  path: '/resManage/m5',
                  title: '新增推荐 leads'
                }
              ]
            },
          ],
          //信息管理
          infoManage:[
            {
              name: "infoManage",
              id: '1',
              title: '信息管理',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '11',
                  path: '/infoManage/market',
                  title: '信息管理1'
                },
                {
                  id: '12',
                  path: '/resManage/m2',
                  title: '公海分配'
                },
                {
                  id: '13',
                  path: '/resManage/m3',
                  title: '藏经阁分配'
                },
                {
                  id: '14',
                  path: '/resManage/m4',
                  title: '付费学院管理'
                },
                {
                  id: '15',
                  path: '/resManage/m5',
                  title: '新增推荐 leads'
                }
              ]
            },
          ],
          //权限管理
          powerManage:[
            {
              name: "powerManage",
              id: '1',
              title: '权限管理',
              icon: 'md-chatbubbles',
              nextItem: [
                {
                  id: '11',
                  path: '/powerManage/market',
                  title: '权限管理1'
                },
                {
                  id: '12',
                  path: '/resManage/m2',
                  title: '公海分配'
                },
                {
                  id: '13',
                  path: '/resManage/m3',
                  title: '藏经阁分配'
                },
                {
                  id: '14',
                  path: '/resManage/m4',
                  title: '付费学院管理'
                },
                {
                  id: '15',
                  path: '/resManage/m5',
                  title: '新增推荐 leads'
                }
              ]
            },
          ]
        },
        menuList: [
          //销售
          {
            name: 'sale',
            nextItem: [
              {
                name: '1',
                id: '1',
                title: '资源分配管理',
                icon: 'md-chatbubbles',
                nextItem: [
                  {
                    id: '11',
                    path: '/sale/market',
                    title: '新名单分配'
                  },
                  {
                    id: '12',
                    path: 'res/recommend',
                    title: '公海分配'
                  },
                  {
                    id: '13',
                    path: 'res/all',
                    title: '藏经阁分配'
                  },
                  {
                    id: '14',
                    path: 'res/all1',
                    title: '付费学院管理'
                  },
                  {
                    id: '15',
                    path: 'res/all2',
                    title: '新增推荐 leads'
                  }
                ]
              },
              {
                name: '2',
                id: '2',
                title: '名单跟进',
                icon: 'md-call',
                nextItem: [
                  {
                    name: "21",
                    id: '21',
                    title: '工具条',
                    nextItem: [
                      {
                        id: '211',
                        path: '211',
                        title: '外呼'
                      },
                      {
                        id: '212',
                        path: '212',
                        title: '获取新 leads'
                      },
                    ]
                  },
                  {
                    id: '22',
                    path: 'customer/conversation1',
                    title: '我的未签约名单'
                  },
                  {
                    name: "23",
                    id: '23',
                    path: 'customer/trial',
                    title: '跟进流程',
                    nextItem: [
                      {
                        id: '231',
                        path: '231',
                        title: '1 待跟进'
                      },
                      {
                        id: '232',
                        path: '232',
                        title: '2 待排课'
                      },
                      {
                        id: '233',
                        path: '233',
                        title: '3 待上课'
                      },
                      {
                        id: '234',
                        path: '234',
                        title: '4 待付费'
                      },
                      {
                        id: '235',
                        path: '235',
                        title: '5 待移交'
                      },
                    ]
                  },
                  {
                    id: '24',
                    path: '24',
                    title: '已签约学员'
                  },
                ]
              },
              {
                name: '3',
                id: '3',
                title: '学员跟进',
                icon: 'md-school',
                nextItem: [
                  {
                    id: '31',
                    path: 'student/toBeArranged',
                    title: '我的学员'
                  }, {
                    id: '32',
                    path: 'student/student',
                    title: '课程管理'
                  }, {
                    id: '33',
                    path: 'student/refund',
                    title: '订单管理'
                  }]
              }]
          },
          //教学
          {
            name: 'teaching',
            nextItem: [
              {
                name: '1',
                id: '1',
                title: '教学',
                icon: 'md-chatbubbles',
                nextItem: [
                  {
                    id: '11',
                    path: 'res/market',
                    title: '新名单分配'
                  },
                  {
                    id: '12',
                    path: 'res/recommend',
                    title: '公海分配'
                  },
                  {
                    id: '13',
                    path: 'res/all',
                    title: '藏经阁分配'
                  },
                  {
                    id: '14',
                    path: 'res/all1',
                    title: '付费学院管理'
                  },
                  {
                    id: '15',
                    path: 'res/all2',
                    title: '新增推荐 leads'
                  }
                ]
              }]
          },
          //市场
          {
            name: 'mkt',
            nextItem: [
              {
                name: '1',
                id: '1',
                title: '市场 ',
                icon: 'md-chatbubbles',
                nextItem: [
                  {
                    id: '11',
                    path: 'res/market',
                    title: '新名单分配'
                  },
                  {
                    id: '12',
                    path: 'res/recommend',
                    title: '公海分配'
                  },
                  {
                    id: '13',
                    path: 'res/all',
                    title: '藏经阁分配'
                  },
                  {
                    id: '14',
                    path: 'res/all1',
                    title: '付费学院管理'
                  },
                  {
                    id: '15',
                    path: 'res/all2',
                    title: '新增推荐 leads'
                  }
                ]
              }]
          },
        ]
      }
    },
    watch: {
      '$route'(to, from) {
        // let prefix = to.path.split("/")[1];
        // this.menuName = to.path.match(/\/(\S*)\//)[1]; //根据url获取当前目录，展示侧边栏的menu
        let path = to.path;
        console.log(path);
        let prefix = to.path.split("/")[1];
        console.log(prefix);
        this.openNames = prefix;
        this.activeName = path;
        this.currentMenu = this.menu[prefix];
        this.$nextTick(() => {
          this.$refs.menu.updateOpened();//手动更新展开的子目录，注意要在 $nextTick 里调用
          this.$refs.menu.updateActiveName();//手动更新当前选择项，注意要在 $nextTick 里调用
        });

      }
    },
    computed: {},
    mounted() {
      let path = this.$route.path;
      console.log(path);
      let prefix = path.split("/")[1];
      console.log(prefix);
      this.openNames = prefix;
      this.activeName = path;
      this.currentMenu = this.menu[prefix];
      this.$nextTick(() => {
        this.$refs.menu.updateOpened();//手动更新展开的子目录，注意要在 $nextTick 里调用
        this.$refs.menu.updateActiveName();//手动更新当前选择项，注意要在 $nextTick 里调用
      });

    },
    methods: {
      goPage(name) { // 点击菜单进入对应路由
        let app = this
        this.$nextTick(() => {
          app.$router.push(name)
        })
      },
    }
  }

</script>
